<template>
    <div >

        <el-form :model="ruleForm" ref="ruleForm"  :rules = "rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
            <div class="container" style="margin-top:20px;">
                <h3>新增仓库</h3>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="仓库名称：" prop="name">
                        <el-input placeholder="请输入内容" v-model="ruleForm.name" style="width:200px">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="仓库管理员：" prop="settleType">
                            <el-select v-model="ruleForm.manageId" value-key="id" placeholder="请选择" style="width:200px">
                                <el-option
                                v-for="item in staffList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="仓库地址：" prop="address">
							<el-input placeholder="请输入内容" v-model="ruleForm.address" style="width:200px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="仓库面积：" prop="area">
							<el-input placeholder="请输入内容" v-model="ruleForm.area" style="width:200px">
                            </el-input> 亩
                        </el-form-item>
                    </el-col>
                </el-row>
				<div>
					仓位设置：
				</div>
				<el-row v-for="(item,index) in positionList">
					<el-col :span="12">
						<el-form-item label="仓位号：" prop="name">
							<el-input placeholder="请输入内容" v-model="item.name" style="width:200px">
						    </el-input>
						</el-form-item>
						<el-form-item label="仓位容量：" prop="volume">
							<el-input placeholder="请输入内容" v-model="item.volume" style="width:200px">
						    </el-input> kg
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="仓位类型：" prop="type">
							<el-select v-model="item.type" placeholder="请选择" style="width:200px">
							    <el-option
							    v-for="item in typeList"
							    :key="item.name"
							    :label="item.name"
							    :value="item.name">
								<!-- {{item.name}} -->
							    </el-option>
							</el-select>
						    </el-input>
						</el-form-item>
						<el-form-item label="仓位管理员：" prop="address">
							<el-select v-model="item.manageId" value-key="id" placeholder="请选择" style="width:200px">
							    <el-option
							    v-for="item in staffList"
							    :key="item.id"
							    :label="item.name"
							    :value="item.id">
								<!-- {{item.name}} -->
							    </el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col v-for="(item1,index1) in item.shelvesList">
						<el-form-item label="货架号：" prop="name">
							<el-input placeholder="请输入内容" v-model="item1.name" style="width:200px">
						    </el-input>
						</el-form-item>
						<el-form-item label="上传土地证："  >
							<div @click="getImageTypeIndex(index,index1)">
							  <el-upload
								class="upload-poster"
								:action="$store.state.upload"
								name="files"
								:on-success="getImageSuccess"
								:before-upload="beforeAvatarUpload"
								:show-file-list = "false"
							  >
								<img v-if="item1.img"  :src="$store.state.plantImg + item1.img" alt="" >
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							  </el-upload>
							</div>
						     <!-- <el-upload
						      	 class="upload-poster"
						      	 :action="$store.state.upload"
						      	 :show-file-list="false"
						      	 :on-success="success"
						      	 name="files"
						      	 >
						      	 <img v-if="ruleForm.proveImg" :src="$store.state.plantImg + item1.img" class="avatar">
						      	 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
						       </el-upload> -->
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item   >
							   <el-button type="primary" @click="addgoodsShelf(index)">增加货架</el-button>
						</el-form-item>
					  </el-col>


					<!-- <el-col style="margin-top:30px;"> -->
						<!-- <el-form-item   style="margin: 0 auto;"> -->
						       <!-- <el-button type="primary" @click="submitrule('ruleForm')" >增加仓位</el-button> -->
						<!-- </el-form-item> -->
					<!-- </el-col> -->
				</el-row>

               <el-row>

                  <el-col>
                  	<div style="width:100%;">
                  		<el-button type="primary" @click="addcw"  style="margin: 0 auto;" >增加仓位</el-button>
                  	</div>
                  </el-col>
                </el-row>
            </div>
            <el-form-item class="footerFixed" label-width="0px">
                <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
	import axios from "axios"
	import uploadImg from '../../../common/uploadImg';
    // import {client_save,client_findById,client_update} from '@/request/api'
    import {regionData,CodeToText} from 'element-china-area-data'
    export default {
		components: {
		    uploadImg
		},
        data() {
            return {
				typeList:[
					{name:"气调仓"},
					{name:"干仓"},
				],
				positionList:[
					{
						address:'',
						shelvesList:[{
							name:'',
							img:''
						}]
					}
				],
				listUrl1:'',
                isShow:false,
                city:'',
                area:'',

				settleTypelist:[],
                options: regionData,
                selectedOptions: [],
                labelPosition:'right',
                allMessage: '',

                ruleForm: {

                },
                rules:{

                },
				id:'',
				staffList:[],
				index:'',
				index1:''
            };
        },
        mounted(){
			this.id = this.$route.query.id
			this.get()
           if(this.id == undefined){

           }else{
               this.init()
           }
        },
        methods: {
			getImageTypeIndex(index,index1){
				this.index = index
				this.index1 = index1
				// console.log(index,index1)
			},
			beforeAvatarUpload(){

			},
			getImageSuccess(res, file) {
				console.log(this.positionList[this.index].shelvesList[this.index1])

				this.$set(this.positionList[this.index].shelvesList[this.index1],"img",res.data.fileName)
				// this.positionList[this.index].shelvesList[this.index1].img = res.data.fileName

			 },
			get(){
				axios.get("http://47.108.220.160:90/jcApi/plant/control/storeHouse/listStoreMan").then(res=>{
					this.staffList = res.data.data
				})
			},
			// 根据id 获取详细信息
            init(){
                axios.get("http://47.108.220.160:90/jcApi/plant/control/storeHouse/findById/"+this.id).then((res)=>{
                	this.ruleForm = res.data.data
					this.positionList = this.ruleForm.positionList
					for(var i=0;i<this.positionList.length;i++){
						this.positionList[i].manageId = Number(this.positionList[i].manageId)
						if(this.positionList[i].type == "1"){
							this.positionList[i].type  = "气调仓"
						}else{
							this.positionList[i].type  = "干仓"
						}
					}
                })
            },
			// 添加货架
			addgoodsShelf(index){
				this.positionList[index].shelvesList.push({name:'',img:''})
			},
			// 213123
			// 添加仓位
           addcw(){
			    this.positionList.push({
				   name:'',
				   type:'',
				   volume:'',
				   manageId:'',
				   shelvesList:[]
				})
		   },
		   // 返回上一页
            backPage () {
                this.$router.go(-1);
            },
			// 提交
            submitrule(formName) {
				console.log(this.positionList)
				for(var i=0;i<this.positionList.length;i++){
					if(this.positionList[i].type == "气调仓"){
						this.positionList[i].type  = "1"
					}else{
						this.positionList[i].type  = "2"
					}
				}
				this.ruleForm.positionList = this.positionList
				let data = this.ruleForm
                axios.post("http://47.108.220.160:90/jcApi/plant/control/storeHouse/save",data).then((res)=>{
                	this.$notify({
                	    title: '提示',
                	    message: '保存成功',
                	    type: 'success',
                	    duration: 500
                	});
                	this.backPage()
                })
            },


        }
    }
</script>

<style scoped lang="less">
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    width: 180px;
	    overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	}
	.el-upload--text {
	    width: 180px;
	}
	.el-upload--text img{
		width: 178px;
		height: 178px;
	}
	.avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	}
	.avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	}
.demo-ruleForm{
    margin-top: 10px;
}
.demo-ruleForm .el-radio--small.is-bordered{
    width: 120px !important;
    margin-right: 10px !important;
}
.box{
    width: 85%;
    margin-bottom: 15px;
    dl{
        margin-bottom: 20px;
        overflow: hidden;
        dt{ margin-bottom: 5px; font-size: 14px;}
        dd{ font-weight: 500; font-size: 12px; float: left; width: 50%; line-height: 24px;}
    }
    dl:last-child{
        margin-bottom: 0;
    }
    .el-col-11{
        height: 200px;
        overflow-y: auto;
        margin-left: 10px;
        border-left: 1px solid #EBEEF5;
        padding-left: 10px;
        p{ color: #303133;}
        .record-tip-con{
            padding-top: 10px;
        }
    }
}
</style>
